<template>
  <div>
    <navs/>
    <div class="previewPage">
      <div class="preview-items">
        <div class="line">
          <h4>前后台</h4>
          <ul>
            <li>
              <input type="radio" id="011" name="front" :checked="0 == is_admin" v-on:click="checkAdmin(0)">
              <label for="011">前台效果</label>
            </li>
            <li v-if="admin_show">
              <input type="radio" name="front" id="012" :checked="1 == is_admin" v-on:click="checkAdmin(1)">
              <label for="012">后台效果</label>
            </li>
          </ul>
        </div>
        <div class="line">
          <h4>模块</h4>
          <ul>
            <li v-for="(m_item,m_index) in models[is_admin]" v-if="m_item != null" v-on:click="checkModel(m_item.id)">
              <input type="radio" :id="'model'+m_index"  :checked="m_item.id == model_check" :name="'model'+is_admin">
              <label :for="m_index">{{m_item.model_name}}</label>
            </li>
          </ul>
        </div>
        <div class="line">
          <h4>功能</h4>
          <ul>
            <li v-for="(g_item,g_index) in gongneng[model_check]" v-if="g_item != null" @click="checkGongNeng(g_item.gongnen_id)">
              <input type="radio" :id="'gongneng'+g_index" :checked="g_item.gongnen_id == gongneng_check"  :name="'gongneng'+model_check">
              <label :for="g_index">{{g_item.gongnen_name}}</label>
            </li>
          </ul>
        </div>
        <div class="line">
          <h4>子功能</h4>
          <ul>
            <li v-for="(item,index) in child_gongneng[gongneng_check]" v-if="item != null" :name="'child_gongneng'+gongneng_check" @click="checkChildGongNeng(item.child_gongnen_id)">
              <input type="radio" :id="'child_gongneng'+index" :checked="item.child_gongnen_id == child_gongneng_check" >
              <label :for="'child_gongneng'+index">{{item.child_gongnen_name}}</label>
            </li>
          </ul>
        </div>
      </div>
      <div class="func-box" >
        <div class="title">
          <h3>功能阅览</h3>
          <div>
            <router-link class="link" to="/previewMod">页面预览</router-link>
          </div>
        </div>
        <div class="funcs">
          <div class="member-login">
            <h4>{{child_gongneng_name[child_gongneng_check]}}</h4>
            <div class="member-box">
              <div class="swipper-box content">
                <h4>配图</h4>
                <div class="swipper">
                  <swiper :options="swiperOption" class="swiper-box">
                    <swiper-slide class="swiper-item" v-for="(file,i) in files[child_gongneng_check]"><img :src="file.path" alt=""></swiper-slide>

                    <div class="swiper-pagination" slot="pagination"></div>
                  </swiper>
                </div>
              </div>
              <div class="detail content">
                <h4>说明</h4>
                <div class="explain">
                  {{des[child_gongneng_check]}}
                </div>
              </div>
              <div class="date-time content">
                <h4>工期</h4>
                <table border="1">
                  <tr>
                    <th>应用类型</th>
                    <th>应用语言</th>
                    <th>工期</th>
                  </tr>
                  <tr v-for="(version,i) in child_gongneng_version[child_gongneng_check]">
                    <td>{{version.version}}</td>
                    <td>{{version.name}}</td>
                    <td>{{version.hour}}</td>
                  </tr>
                </table>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <footers></footers>
  </div>
</template>
<script>
  import navs from '../components/nav'
  import footers from '../components/footer'
  import axios from 'axios'
  import tr from "../../../public/assets/libs/moment/src/locale/tr";
  export default {
    name: 'previewFunc',
    created: function() {
          var that=this;
          var checklist=localStorage.getItem('list');
          var type=localStorage.getItem('type');
          that.list=JSON.parse(checklist);
          that.type=(JSON.parse(type) == undefined)?[]:JSON.parse(type);
          var type_arr=[]

          that.type.forEach(function(value,index,array){
              if(value){
                  (that.app_cate!=0)?that.app_cate=value.id:'';
                  type_arr[value.id]=value
              }
          });
          that.type=type_arr;

          var models=[];
          var gongneng=[];
          var child_gongneng=[];
          var child_gongneng_version=[];
          var child_gongneng_name=[];


          if(that.list.gongnen_list!=undefined){
              that.list.gongnen_list.forEach(function(value,index,array){
                if(value!=null){

                    value.forEach(function(value_child,index_child,array_child){
                        if(value_child && value_child.list!=undefined){
                            value_child.list.forEach(function(g_vulue,g_index,g_array){
                                var flag=true;
                                var c_flag=true;
                                (child_gongneng[g_vulue.gongnen_id]==undefined)?child_gongneng[g_vulue.gongnen_id]=[]:"";
                                (gongneng[g_vulue.model_id]==undefined)?gongneng[g_vulue.model_id]=[]:"";
                                (child_gongneng_version[g_vulue.child_gongnen_id]==undefined)?child_gongneng_version[g_vulue.child_gongnen_id]=[]:"";
                                var model_obj={};
                                model_obj.id=g_vulue.model_id
                                model_obj.model_name=g_vulue.model_name;
                                if(index==1){
                                    (models[1]==undefined)? models[1]=[]:"";
                                    models[1][g_vulue.model_id]=model_obj;
                                }else{
                                    (models[0]==undefined)? models[0]=[]:"";
                                    models[0][g_vulue.model_id]=model_obj;
                                }

                                gongneng[g_vulue.model_id]
                                for (var i in gongneng[g_vulue.model_id]) {
                                    if(gongneng[g_vulue.model_id][i].gongnen_id==g_vulue.gongnen_id) {
                                        flag=false;
                                    }
                                }

                                if(flag){
                                    gongneng[g_vulue.model_id].push(g_vulue);
                                }

                                for (var i in child_gongneng[g_vulue.gongnen_id]) {
                                    if(child_gongneng[g_vulue.gongnen_id][i].child_gongnen_id==g_vulue.child_gongnen_id) {
                                        c_flag=false;
                                    }
                                }

                                if(c_flag){
                                    child_gongneng[g_vulue.gongnen_id].push(g_vulue);
                                }

                                //models[g_vulue.model_id]=g_vulue.model_name;

                                var obj={};
                                obj.version=that.type[index].name
                                obj.name=that.list.language1_check[index].name
                                obj.hour=g_vulue.hour
                                child_gongneng_version[g_vulue.child_gongnen_id].push(obj);
                                child_gongneng_name[g_vulue.child_gongnen_id]=g_vulue.child_gongnen_name
                            });

                        }
                    });
                }
              });
          }


          (models[1]!=undefined)? models[1] = models[1].filter(function(n){ if(n){ return n } }):that.admin_show=false;
          (models[0]!=undefined)? models[0] = models[0].filter(function(n){ if(n){ return n } }):"";


           that.model_check=models[0][0].id;
           that.gongneng_check=gongneng[that.model_check][0].gongnen_id;
           that.child_gongneng_check=child_gongneng[that.gongneng_check][0].child_gongnen_id;
           /*console.log(that.child_gongneng_check);
           console.log(child_gongneng_version);*/

           var files=[];
           var des=[];

           axios.post(this.HOST+'/api/Index/getResource',{

           }).then(function (response) {
            that.child_gongneng_file=response.data.data.info;
            child_gongneng[that.gongneng_check].forEach(function(g_vulue,g_index,g_array){
                if(g_vulue){
                    files[g_vulue.child_gongnen_id]=(that.child_gongneng_file[g_vulue.child_gongnen_id]==undefined)?[]:that.child_gongneng_file[g_vulue.child_gongnen_id].files;
                    des[g_vulue.child_gongnen_id]=(that.child_gongneng_file[g_vulue.child_gongnen_id]==undefined)?'无':that.child_gongneng_file[g_vulue.child_gongnen_id].des;
                }

            })

               that.files=files;

           }).catch(function (response) {
                console.log(response);
            });


         that.gongneng=gongneng;
         that.child_gongneng=child_gongneng;
         that.models=models;
         that.child_gongneng_version=child_gongneng_version;
         that.child_gongneng_name=child_gongneng_name
         that.des=des

      /*    console.log(child_gongneng);
          console.log(gongneng);
          console.log(child_gongneng_version);*/

      },
    data() {
      return {
        swiperOption: {
          app_cate:0,
          slidesPerView: 1,
          spaceBetween: 30,
          loop : true,
          delay: 3500,
          speed: 750,
          autoplay: true,
          mousewheel: true,
          pagination: {
            el: '.swiper-pagination',
            clickable: true
          }
        },
        is_admin:0,
        gongneng_check:0,
        model_check:0,
        child_gongneng_check:0,
        gongneng:[],
        child_gongneng:[],
        child_gongneng_file:[],
        child_gongneng_version:[],
        models:[],
        files:[],
          des:[],
          isShow:true,
          admin_show:true,
      }
    },
    methods:{
        checkAdmin(index){
            this.is_admin=index;
            if(this.models[index]==undefined){
                this.model_check='';
                this.gongneng_check='';
                this.child_gongneng_check='';
                this.isShow=false;
            }else{
                this.model_check=this.models[index][0].id;
                this.gongneng_check=this.gongneng[this.model_check][0].gongnen_id;
                this.child_gongneng_check=this.child_gongneng[this.gongneng_check][0].child_gongnen_id;
                this.isShow=true;
            }
        },
        checkGongNeng(index){
            this.gongneng_check=index;
            this.child_gongneng_check=this.child_gongneng[this.gongneng_check][0].child_gongnen_id;
        },
        checkChildGongNeng(index){
            this.child_gongneng_check=index;
        },
        checkModel(index){
            this.model_check=index;
            this.gongneng_check=this.gongneng[index][0].gongnen_id;
            this.child_gongneng_check=this.child_gongneng[this.gongneng_check][0].child_gongnen_id;
        },
   },
    components: {
      navs,
      footers,
    }
  }
</script>

<style scoped>
  .swiper-box{
    height: 100%;
  }
  .previewPage {
    padding-bottom: 26px;
    min-height: 727px;
    background: #fff;
  }
  .preview-items {
    margin: 20px auto 50px;
    /*background: #fff;*/
    /*border-bottom: .1rem solid hsla(212,9%,63%,.3);*/
  }
  .preview-items .line {
    padding: 1.2rem 0;
    margin: 0 auto;
    max-width: 980px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
  }
  .preview-items .line h4 {
    width: 70px;
    font-size: 1.4rem;
    margin-right: 2rem;
  }
  .preview-items .line ul {
    max-width: 883px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    border: 1px solid hsla(212,9%,63%,.3);
  }
  .preview-items .line ul li {
    position: relative;
    width: 10rem;
    height: 2.4rem;
    line-height: 2.4rem;
    color: #979fa8;
    font-size: 1rem;
    text-align: center;
    background: #fff;
    border-left: 1px solid hsla(212,9%,63%,.3);
  }
  .preview-items .line ul li:first-child {
    border-left: none;
  }
  .preview-items .line ul li input[type="radio"] {
    position: absolute;
    top: 0;
    visibility: hidden;
  }
  .preview-items .line ul li label {
    display: inline-block;
    width: 100%;
    height: 100%;
    cursor: pointer;
  }
  .preview-items .line ul li input[type="radio"]:checked + label {
    background: #4289db;
    color: #fff;
  }
  .func-box .funcs {
    margin: 2rem auto 0;
    max-width: 980px;
    padding: 3rem 1rem 4rem;
    border-radius: .4rem;
    background-color: #f0f2f5;
    width: 100%;
  }
  .func-box h3 {
    font-size: 1.6rem;
    text-align: center;
  }
  .func-box h4 {
    font-size: 1.4rem;
  }
  .func-box .funcs .member-box {
    padding: 1rem 2rem;
    margin: 0 auto;
  }
  .func-box .funcs .member-box .swipper {
    width: 60rem;
    height: 32rem;
    position: relative;
    padding: 1rem 3rem;
    margin: 0 auto;
  }
  .func-box .funcs .content {
    margin: 1rem auto;
  }
  .member-box .swipper ul li img {
    width: 100%;
    height: 100%;
  }
  .funcs .member-box .swipper img.arrow {
    position: absolute;
    top: 50%;
    margin-top: -1.5rem;
    width: 3rem;
    height: 3rem;
    padding: 0.5rem;
    border-radius: 1.5rem;
    background: #fff;
    cursor: pointer;
  }
  .funcs .member-box .swipper img.arrow.left {
    left: -1rem;
  }
  .funcs .member-box .swipper img.arrow.right {
    right: -1rem;
  }
  .funcs .detail {
    width: 100%;
    font-size: 1rem;
  }
  .funcs .detail .explain {
    width: 100%;
    border-radius: 0.4rem;
    background: #fff;
    padding: 1rem 3rem;
    text-align: center;
    line-height: 1.5rem;
  }
  .funcs .content h4 {
    font-size: 1.4rem;
    margin-bottom: 1rem;
  }
  .funcs .date-time, .funcs .date-time table {
    width: 100%;
  }
  .funcs .date-time table {
    background: #fff;
    border-collapse:collapse;
    border-color: hsla(212,9%,63%,.2);
  }
  .funcs .date-time table td, .funcs .date-time table th {
    padding: 0.5rem;
    text-align: center;
  }
  .funcs .date-time table th {
    background: #f3f5f7;
  }
  .func-box .title {
    margin: 0 auto;
    max-width: 980px;
    height: 3rem;
    position: relative;
  }
  .func-box .title div {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
  }
  .func-box .title .link {
    display: inline-block;
    width: 8rem;
    height: 2.4rem;
    line-height: 2.4rem;
    color: #fff;
    background: #4289db;
    border-radius: 0.4rem;
    text-align: center;
    position: absolute;
    right: 0;
    font-size:1rem;
  }
</style>
